<template>
	<view class="animated fadeIn faster">
		<view class="mb-2">
			<swiper indicator-dots autoplay :interval="5000" :duration="1000" indicator-active-color="#f70102" indicator-color="#ffffff" class="position-relative" style="width:750rpx;height: 300rpx;overflow: hidden;">
				<block v-for="(item,idx) in banner" :key="idx">
					<swiper-item>
					    <view class="swiper-item" @click="keClick(idx)">
					    	<image :src="item.image" mode="aspectFill" lazy-load style="width:750rpx;height: 300rpx;"></image>
					    </view>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<view class="bg-fff p-3">
			<view class="k-tit">技能培训课程</view>
			<view class="d-flex d-flex-between mb-3" v-for="(item,iindex) in list" :key="item.id" @click="keClick(iindex)">
				<image class="mr-2 rounded10" :src="item.activity_image" mode="aspectFill" style="width: 280rpx;height: 160rpx;"></image>
				<view class="d-flex-item d-flex d-flex-column py-1 d-flex-between">
					<view class="text-clamp-two">{{item.activity_name}}</view>
					<view class="d-flex">
						<view class="font24 colorsuccess">报名开始时间：</view>
						<view class="font24 color999">{{item.enroll.slice(0, 10)}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="load-more d-flex d-flex-center bg-fff">
			<text>{{loadingType === 0 ? '上拉显示更多' : (loadingType === 1 ? '正在加载...' : '~ 我是有底线的 ~')}}</text>
		</view>
	</view>
</template>

<script>
	import { manner } from '@/util/manner.js'
	import { userApi } from '@/http/userApi.js'
	export default {
		data() {
			return {
				loadingType:2,
				page:1,
				banner:[
					{
						image: 'https://168898.oss-cn-hangzhou.aliyuncs.com/hbck/ba2.jpg',
					},{
						image: 'https://168898.oss-cn-hangzhou.aliyuncs.com/hbck/ba3.jpg',
					}
				],
				list:[]
			}
		},
		onReady() {
			this.init()
		},
		onReachBottom() {
			if (this.loadingType == 2 || this.loadingType == 1) {
				return;
			}
			this.page++
			this.init()
		},
		methods: {
			keClick(num){
				let that = this
				let oData = JSON.stringify(that.list[num]);
				uni.navigateTo({
					url:'/pages/detail/detail?obj='+oData
				})
			},
			enroll(){
				uni.navigateTo({
					url:'/pages/enroll/enroll'
				})
			},
			async init(){
				let that = this
				that.loadingType = 1
				try{
					const result = await userApi.selectCourses(that.page)
					if(result.data){
						that.list = that.list.concat(result.data)
					}
					if(result.data && result.data.length>9){
						that.loadingType = 0
					}else{
						that.loadingType = 2
					}
				}catch(e){
					that.loadingType = 2
				}
			}
		}
	}
</script>

<style>
	.k-tit{
		color:#f70102;
		font-size: 30rpx;
		margin-bottom: 26rpx;
		font-weight: bold;
	}
</style>
